import React, { ReactNode } from 'react'
import { Menu, Icon } from 'antd'
import style from './style.module.scss'
import { Link } from 'react-router-dom'

interface ExplorePageNavProps {

}

interface ExplorePageNavState {

}

interface ExplorerPageSearchBarProps {
    readonly className?: string;
}

interface ExplorerPageSearchBarState {
    collapseStatus: boolean;
}

export class ExplorerPageSearchBar extends React.Component<ExplorerPageSearchBarProps, ExplorerPageSearchBarState> {
    constructor (props: ExplorerPageSearchBarProps) {
        super(props)
        this.state = {
            collapseStatus: false
        }
    }

    handleCollapseBtnClick = (): void => {
        this.setState({
            collapseStatus: true
        })
    }

    handleHideBtnClick = (): void => {
        this.setState({
            collapseStatus: false
        })
    }

    getSearchInputClass = (): string => {
        const status = this.state.collapseStatus
        if (!status) {
            return style.hiddenSearchInput
        } else {
            return ''
        }
    }

    getHideClass = (): string => {
        const status = this.state.collapseStatus
        if (!status) {
            return style.hidden
        } else {
            return ''
        }
    }

    getSearchBarShowClass = (): string | undefined => {
        if (this.state.collapseStatus) {
            return style.searchBarShow
        }
    }

    render (): ReactNode {
        return (
            <div className={style.searchBox + ' ' + this.getSearchBarShowClass()}>
                <button className={style.searchShowBtn} onClick={this.handleCollapseBtnClick}>
                    <Icon type="search"/>
                </button>
                <div className={style.searchInput + ' ' + this.getSearchInputClass()}>
                    <button className={style.hideBtn + ' ' + this.getHideClass()} onClick={this.handleHideBtnClick}>
                        <Icon type="right"/>
                    </button>
                    <input type="text" name="searchName" className={this.getHideClass()}/>
                </div>
            </div>
        )
    }
}

export class ExplorePageNav extends React.Component<ExplorePageNavProps, ExplorePageNavState> {
    render (): ReactNode {
        return (
            <div>
                <div className={style.navItemBox}>
                    <Menu mode="horizontal">
                        <Menu.Item>
                            <Link to={'/explore/race'}>
                                竞赛
                            </Link>
                        </Menu.Item>
                        <Menu.Item>
                            <Link to={'/explore/project'}>
                                项目
                            </Link>
                        </Menu.Item>
                        <Menu.Item>
                            <Link to={'/explore/community'}>
                                队伍
                            </Link>
                        </Menu.Item>
                    </Menu>
                    <ExplorerPageSearchBar className={style.navSearch}/>
                </div>
            </div>
        )
    }
}
